<template>
    <div class="index-my-author-and-community">
        <div class="dir-top-nowrap gap">
            <AppTabs :list="tablist" v-model:value="tabActive" type="card"></AppTabs>
            <Swiper :modules="[SwiperPagination]" :pagination="{ type: 'bullets' }" :simulateTouch="false"
                :autoHeight="true" @swiper="(e) => swiperRef = e" @slideChange="slideChange">
                <SwiperSlide>
                    <div class="dir-top-nowrap gap author-box">
                        <div class="dir-left-nowrap cross-center gap item" v-for="item in authorList" :key="item.id">
                            <div class="box-grow-0">
                                <AppAvatar class="avatar" :src="item.avatar" size="70" round></AppAvatar>
                            </div>
                            <div class="box-grow-1 dir-left-nowrap gap">
                                <div class="box-grow-1">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="desc">{{ item.desc }}</div>
                                </div>
                                <div class="box-grow-0 cross-center">
                                    <div class="main-center cross-center follow" @click="changeFollow(item.id)">关注</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
                <SwiperSlide>
                    <div class="dir-top-nowrap gap community-box">
                        圈子
                    </div>
                </SwiperSlide>
            </Swiper>
        </div>
    </div>
</template>

<script setup lang="ts" name="IndexMyAuthorAndCommunity">
import { AppTabs, AppAvatar } from "#components";
import { Swiper, SwiperSlide } from 'swiper/vue';
import type { Swiper as SwiperClass } from 'swiper';
import 'swiper/scss';
import 'swiper/scss/pagination';

/**
 * 我的关注作者和订阅圈子组件
 */

const tablist = [
    {
        title: '我关注的作者',
        name: 'author',
    },
    {
        title: '我订阅的圈子',
        name: 'community',
    }
]
const tabActive = ref(tablist[0].name)

const swiperRef = ref<SwiperClass | null>(null)
function slideChange(swiper: SwiperClass) {
    // console.log(swiper);
}
watch(tabActive, (val) => {
    swiperRef.value?.slideTo(tablist.findIndex((item) => item.name === val))
})

const authorList = [
    {
        id: 1,
        name: '小明',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
    {
        id: 2,
        name: '小刚',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
    {
        id: 3,
        name: '小红',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
    {
        id: 4,
        name: '小喆',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
    {
        id: 5,
        name: '小桔',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
    {
        id: 6,
        name: '小聪',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
    {
        id: 7,
        name: '小册',
        desc: '日常 | 方糖',
        avatar: 'http://www.ay1.cc/img?w=70&h=70',
    },
]

/**
 * 切换关注
 */
function changeFollow(id: number) {
    console.log('发送关注创作者请求', id);
}


</script>

<style lang='scss' scoped>
.index-my-author-and-community {
    position: relative;
    background-color: #fff;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 18px;

    :deep(.swiper-initialized) {
        width: 100%;
        padding-bottom: 40px;

        .swiper-pagination-bullets {
            bottom: 0;
        }
    }

    .author-box {
        .item {
            .avatar {
                cursor: pointer;
            }

            .name {
                font-size: 14px;
                font-weight: 600;
                color: #333333;
                margin-bottom: 4px;
            }

            .desc {
                font-size: 14px;
                color: #777777;
            }

            .follow {
                cursor: pointer;
                width: 62px;
                height: 28px;
                background: #F1F1F1;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 400;
                color: #333333;
            }
        }
    }

    .community-box {
        .item {}
    }
}
</style>